import React from 'react';
import {withRouter, Redirect} from 'react-router-dom';
import {Icon} from 'antd';
import { inject } from 'mobx-react';

@inject('store')
@withRouter
export default class Success extends React.Component {
  state = {
    lastSecond: 10,
    forgetPage: false
  }
  timer = null;
  componentDidMount(){
    this.timer = setInterval(()=> {
      if (this.props.current !== 2) {
        return;
      }
      if (!this.state.lastSecond) {
        clearInterval(this.timer);
        this.logout();
        return;
      }
      this.setState({
        lastSecond: this.state.lastSecond - 1
      })

    }, 1000);
  }
  componentWillUnmount(){
    clearInterval(this.timer);
  }
  logout = () => {
    const {pathname} = this.props.location;
    if (pathname === '/forget') {
      this.setState({
        forgetPage: true
      });
    } else {
      this.props.store.setLogout ();
    }
  }
  render () {
    const {lastSecond,forgetPage} = this.state;
    if (forgetPage) {
      return (
        <Redirect to="/login" />
      )
    }
    return (
      <div style={{textAlign: 'center'}}>
        <div>
          <Icon
            type="check-circle"
            style={{
              fontSize: 100,
              color: 'rgb(82, 196, 26)'
            }}
          />
        </div>
        <h3 style={{padding: 10}}>密码设置成功！</h3>
        <p>
          {lastSecond}S后进入登录页面，点击此处<a onClick={this.logout}>登录</a>
        </p>
      </div>
    );
  }
}
